// 主题色
$primary-color: #2080f0;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$info-color: #909399;

// 文字颜色
$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;
$text-color-placeholder: #c0c4cc;

// 边框颜色
$border-color-base: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;

// 背景颜色
$background-color-base: #f5f7fa;
$background-color-light: #f5f7fa;
$background-color-lighter: #fafafa;
$background-color-extra-light: #fff;

// 字体大小
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

// 边框圆角
$border-radius-base: 4px;
$border-radius-small: 2px;
$border-radius-large: 8px;
$border-radius-circle: 50%;

// 间距
$spacing-mini: 4px;
$spacing-small: 8px;
$spacing-base: 16px;
$spacing-large: 24px;
$spacing-extra-large: 32px;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);

// 断点
$breakpoint-xs: 576px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1920px;

// 暗色主题变量
:root[data-theme='dark'] {
  --primary-color: #1890ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
  --info-color: #909399;

  --text-color-primary: #fff;
  --text-color-regular: rgba(255, 255, 255, 0.85);
  --text-color-secondary: rgba(255, 255, 255, 0.65);
  --text-color-placeholder: rgba(255, 255, 255, 0.45);

  --border-color-base: #434343;
  --border-color-light: #303030;
  --border-color-lighter: #262626;
  --border-color-extra-light: #1f1f1f;

  --background-color-base: #141414;
  --background-color-light: #1f1f1f;
  --background-color-lighter: #262626;
  --background-color-extra-light: #303030;
}

// 亮色主题变量（默认）
:root[data-theme='light'] {
  --primary-color: #{$primary-color};
  --success-color: #{$success-color};
  --warning-color: #{$warning-color};
  --error-color: #{$error-color};
  --info-color: #{$info-color};

  --text-color-primary: #{$text-color-primary};
  --text-color-regular: #{$text-color-regular};
  --text-color-secondary: #{$text-color-secondary};
  --text-color-placeholder: #{$text-color-placeholder};

  --border-color-base: #{$border-color-base};
  --border-color-light: #{$border-color-light};
  --border-color-lighter: #{$border-color-lighter};
  --border-color-extra-light: #{$border-color-extra-light};

  --background-color-base: #{$background-color-base};
  --background-color-light: #{$background-color-light};
  --background-color-lighter: #{$background-color-lighter};
  --background-color-extra-light: #{$background-color-extra-light};
}